<!--
  @author: 善良的YWJ
  @Created by shanliangdeYWJ on 2020/09/16 02:16:44
  @file: Service.vue
  @description:
  ==================
  Service 服务页面 包含服务业公共部分组件
  ==================
  @link [Github](https://github.com/shanliangdeYWJ)
-->

<template>
  <div class="service">
    <LoadingPage :showLoading="showLoading" />
    <MySwiper :swiperList="big_images" />
    <!-- 公共导航组件 -->
    <NavigationFrame :lists="lists" />
    <router-view></router-view>
  </div>
</template>

<script>
import LoadingPage from '@/components/loading-page';

import NavigationFrame from '@/components/navigation-frame.vue';
import MySwiper from '@/components/my-swiper.vue';
export default {
  name: 'GFService',
  components: {
    NavigationFrame,
    MySwiper,
    LoadingPage
  },
  mounted () {
    const bgImg = new Image();
    bgImg.src = this.imgUrl; // 获取背景图片的url
    bgImg.onerror = () => { console.log('img onerror'); };
    bgImg.onload = () => { this.showLoading = false; };// 等背景图片加载成功后 去除loading

    this.getApi();
  },
  data () {
    return {
      showLoading: true,
      lists: [
        { path: '/Service/Transport', class: 'icon-guandao', name: '配送服务' },
        { path: '/Service/ProductIntro', class: 'icon-yugang', name: '产品画册' },
        { path: '/Service/ContactUs', class: 'icon-building-materials', name: '联系我们' }
      ],
      big_images: [
        // 坑 图片需要 require('图片path') 这样加载
      ],
      small_images: [],
      imgUrl: 'http://dummyimage.com/1920X540'
    };
  },
  methods: {
    async getApi () {
      const { data: res } = await this.$http('/gftopen/service/lunbo');
      const { lunbo } = res.message;
      this.big_images = lunbo.big || [];
    }
  }
};
</script>

<style lang='scss' scoped>
</style>
